<template>
	<view class="details">
		<view class="banner">
			<image :src="'http://localhost:8088/file/downloadGoods?t='+goodData.image" mode="widthFix"></image>
		</view>
		<view class="good-details">
			<view class="good">
				<view class="name">
					{{goodData.name}}
				</view>
				<view class="price">
					￥{{(goodData.price/100).toFixed(2)}}
				</view>
				<view class="introduce">
					{{goodData.description}}
				</view>
			</view>
		</view>
		<view class="footer">
			<uni-goods-nav :fill="true" :options="[]" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				id: null,
				buttonGroup: [{
					text: '加入购物车',
					backgroundColor: '#e89abe',
					color: '#fff'
				}],
				goodData: {}
			}
		},
		onLoad(options) {
			console.log(options.id);
			this.id = options.id;
			this.userId = JSON.parse(localStorage.getItem('user'));
			uni.showLoading({
				title: "加载中"
			})
			uni.request({
				url: '/goods/getGoodById',
				data: {
					id: this.id
				},
				success: (res) => {
					console.log(res);
					this.goodData = res.data.data;
					uni.hideLoading();
				}
			})
		},
		methods: {
			buttonClick() {
				uni.request({
					url: '/cart/pushCart',
					method: 'POST',
					data: {
						name: this.goodData.name,
						image: this.goodData.image,
						userId: this.userId,
						goodId: this.goodData.id,
						classId: this.goodData.category_id,
						number: 1,
						amount: this.goodData.price,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.data,
							icon: 'success'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.details {
		height: 100%;
		width: 100%;
		background-color: #8f8f8f;
	}

	.banner {
		height: 450rpx;
		overflow: hidden;
	}

	.banner image {
		width: 100%;
	}

	.footer {
		position: fixed;
		width: 100%;
		bottom: 0;
	}

	.good {
		float: left;
		font-size: 46rpx;
		padding: 20rpx;
		font-weight: 600;
	}

	.good-details {
		background-color: white;
	}

	.good .name {
		font-size: 36rpx;
	}

	.good .introduce {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-weight: 300;
		color: dimgray;
	}

	.add-btn {
		margin-top: 50rpx;
		margin-right: 5%;
		width: 50rpx;
		height: 50rpx;
		background-color: #e89abe;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		float: right;
	}

	.add-btn image {
		width: 60%;
		height: 60%;
	}
</style>